<template>
	<div class="flow-menu" ref="tool">
		<div class="flow-node-form-header">
		    节点
		</div>
		<ul style="list-style: none;padding-left: 20px">
			<draggable @end="end" @start="move" v-model="menuList" :options="draggableOptions">
				<li v-for="subMenu in menuList" :class="[ nodeTypeActive(subMenu) , 'flow-node-menu-li' ]" :key="subMenu.id" :type="subMenu.type">
					<i :class="subMenu.ico"></i> {{subMenu.name}}
				</li>
			</draggable>
		</ul>
	</div>
</template>
<script>
	import draggable from 'vuedraggable'

	var mousePosition = {
		left: -1,
		top: -1
	}

	export default {
		data() {
			return {
				// draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
				draggableOptions: {
					preventOnFilter: false,
					sort: false,
					disabled: false,
					ghostClass: 'tt',
					// 不使用H5原生的配置
					forceFallback: true,
					// 拖拽的时候样式
					// fallbackClass: 'flow-node-draggable'
				},
				// 默认打开的左侧菜单的id
				menuList: [{
						id: '1',
						type: 'start',
						name: '开始',
						ico: 'el-icon-user-solid',
						// 自定义覆盖样式
						style: {}
					},{
						id: '2',
						type: 'check',
						name: '审批',
						ico: 'el-icon-s-check',
						// 自定义覆盖样式
						style: {}
					},
					{
						id: '3',
						type: 'end',
						name: '结束',
						ico: 'el-icon-s-claim',
						// 自定义覆盖样式
						style: {}
					}
				],
				nodeMenu: {}
			}
		},
		components: {
			draggable
		},
		created() {
			/**
			 * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
			 * @param event
			 */
			if (this.isFirefox()) {
				document.body.ondrop = function(event) {
					// 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
					mousePosition.left = event.layerX
					mousePosition.top = event.clientY - 50
					event.preventDefault();
					event.stopPropagation();
				}
			}
		},
		methods: {
			nodeTypeActive(node) {
				return {
					'start' : node.type === 'start',
					'end' : node.type === 'end'
				}
			},
			// 根据类型获取左侧菜单对象
			getMenu(type) {
				for (let i = 0; i < this.menuList.length; i++) {
					if (this.menuList[i].type === type) {
						return this.menuList[i]
					}
				}
			},
			// 拖拽开始时触发
			move(evt, a, b, c) {
				var type = evt.item.attributes.type.nodeValue
				this.nodeMenu = this.getMenu(type)
			},
			// 拖拽结束时触发
			end(evt, e) {
				this.$emit('addNode', evt, this.nodeMenu, mousePosition)
			},
			// 是否是火狐浏览器
			isFirefox() {
				var userAgent = navigator.userAgent
				if (userAgent.indexOf("Firefox") > -1) {
					return true
				}
				return false
			}
		}
	}
</script>
<style>
	.flow-node-form-header {
	    height: 32px;
	    /* border-top: 1px solid #dce3e8; */
	    border-bottom: 1px solid #dce3e8;
	    background: #FFFFFF;
	    color: #000;
	    line-height: 32px;
	    padding-left: 12px;
	    font-size: 14px;
	}

	.flow-node-pmenu:hover {
		background-color: #E0E0E0;
	}

	.flow-node-menu-li {
		color: #565758;
		width: 80px;
		border: 1px dashed #E0E3E7;
		margin: 20px 0;
		padding: 5px;
		border-radius: 5px;
		padding-left: 8px;
	}

	.flow-node-menu-li:hover {
		/* 设置移动样式*/
		cursor: move;
		background-color: #F0F7FF;
		border: 1px dashed #1879FF;
		border-left: 4px solid #1879FF;
		padding-left: 5px;
	}
	.flow-node-menu-li.start:hover {
		border: 1px dashed #00c300;
		border-left: 4px solid #00c300;
	}
	.flow-node-menu-li.end:hover {
		border: 1px dashed #717171;
		border-left: 4px solid #717171;
	}
</style>
